<template>
	<view :class="[config.style]">
		<view class="main-section tabbar-bottom">
			<view class="header">
				<view class="login" v-if="userInfo.memberInfo == undefined" @click="login()">
					<view class="avatar">
						<image class="image" src="../../../static/images/user_default.png"></image>
					</view>
					<view class="login-btn">
						立即登录
					</view>
				</view>
				<!--登陆后-->
				<view class="user-info" v-else>
					<view class="avatar">
						<image class="image" :src="userInfo.memberInfo.avatar"></image>
					</view>
					<view class="right-info">
						<view class="nickname text-ellipsis">
							{{userInfo.memberInfo.nickname}} 
						</view>
						<view class="uid">
							<text>Uid:</text><text>{{userInfo.memberInfo.uid}}</text>
						</view>
						<!-- #ifdef H5 || MP-WEIXIN-->
						<view class="info-2">
							<view class="btn"  @click="syncWeixin()">
								<text class="iconfont">&#xe6b6;</text>
								<text class="text">同步微信信息</text>
							</view>
						</view>
						<!-- #endif -->
					</view>
				</view>
				<view class="action-box">
					<template v-if="config.service.weixinkf">
						<!-- #ifdef H5 -->
						<view class="kefu" @click="openWeixinKf()">
							<text class="iconfont">&#xec2e;</text>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button class="kefu" open-type="contact">
							<text class="iconfont">&#xec2e;</text>
						</button>
						<!-- #endif -->
						<view class="config" @click="navigateTo('config/index')">
							<text class="iconfont">&#xe640;</text>
						</view>
					</template>
					
				</view>
			</view>
			<view class="user-exp-info">
				<view class="wallet">
					<view class="title">我的钱包</view>
					<view class="info">
						<text>￥ </text>
						<text class="credit" v-if="userInfo.memberInfo!==undefined">{{userInfo.memberInfo.credit2}}</text>
						<text>余额</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="checkin" @click="navigateTo('../checkin/checkin')">
					<view class="title">签到领奖</view>
					<view class="info"> 
						<text class="credit" v-if="userInfo.memberInfo!==undefined">{{userInfo.memberInfo.credit1}}</text>
						<text>积分</text>
					</view>
				</view>
			</view>
			<!--会员卡-->
			<view class="vip" v-if="memberCard == true" @click="navigateTo('../member/list')">
				<view class="vip-status">
					<text class="iconfont">&#xe6ae;</text>
					<text class="vip-desc">尊享会员权益</text>
				</view>
				<view class="vip-type">
					<text>畅想多种会员卡型</text>
					<text class="iconfont">&#xe62f;</text>
				</view>
			</view>
			<!--会员卡 END-->
			<!-- 学习中心 -->
			<view class="modules study-center" @click="navigateTo('study/index')">
				<view class="modules-header">
					<view class="title">学习中心</view>
					<view class="list-btn">
						查看更多<text class="iconfont">&#xe62f;</text>
					</view>
				</view>
				<view class="content">
					<template v-if="studyCenterList.length > 0">
						<swiper class="swiper" :indicator-dots="false" :vertical="true" :autoplay="true" :interval="5000">
							<swiper-item class="swiper-item" v-for="(item,index) in studyCenterList" :key="item.id">
								<view class="curriculum">
									<image class="cover" :src="item.order_info.cover_200" mode="widthFix"></image>
									<text class="course-name">{{item.order_info.title}}</text>
								</view>
								<view class="operate-btn">
									<text class="operate-btn-item">继续学习</text>
									<text class="iconfont" >&#xe6a3;</text>
								</view>
							</swiper-item>
						</swiper>
					</template>
					<template v-else>
						<view class="none">
							还没有学习内容哦~
						</view>
					</template>
					
				</view>
			</view>
			<!-- 学习中心 END-->
			<!-- 推广中心 -->
			<view class="modules tarec-modules" @click="navigateTo('../distribution/index')" v-if="distributePluginConfig.promoter_config!==undefined && distributePluginConfig.promoter_config.status == 1"> 
				<view class="tarec">
					<view class="tarec-title"><text>推广中心&nbsp;·&nbsp;惊喜连连</text></view>
					<view class="tarec-description"><text>简单分享，快速裂变，轻松赚钱</text></view>
				</view>
				<view class="tarec-img">
					<image class="tarec-img-item" src="../../../static/images/tarec.png" mode=""></image>
				</view>
			</view>
			<!-- 推广中心 END-->
			
			<!-- 功能导航 -->
			<view class="modules">
				<view class="modules-header">
					<view class="title">
						常用功能
					</view>
				</view>
				<view class="nav-group group-block">
					<view class="nav-item" @click="navigateTo('orders/index')">
						<text class="iconfont">&#xe67e;</text>
						<text class="nav-title">我的订单</text>
					</view>
					<view class="nav-item" @click="navigateTo('../member/list')" v-if="memberCard == true">
						<text class="iconfont">&#xe63d;</text>
						<text class="nav-title">升级会员</text>
					</view>
					<view class="nav-item" @click="navigateTo('../clockin/lists')" v-if="clockinPluginConfig!==undefined && clockinPluginConfig.status == 1">
						<text class="iconfont">&#xe6f8;</text>
						<text class="nav-title">打卡任务</text>
					</view>
					<view class="nav-item" @click="navigateTo('favorites/index')">
						<text class="iconfont">&#xe6d2;</text>
						<text class="nav-title">我的收藏</text>
					</view>
					<view class="nav-item" @click="navigateTo('history/index')">
						<text class="iconfont">&#xe639;</text>
						<text class="nav-title">浏览记录</text>
					</view>
					<view class="nav-item" @click="navigateTo('follow/index')">
						<text class="iconfont">&#xe61a;</text>
						<text class="nav-title">我的关注</text>
					</view>
			    </view>
			</view>
			<!-- 功能导航 -->
			
			<!-- 扩展导航 -->
			<view class="modules" v-if="appPlugin">
				<view class="modules-header">
					<view class="title">
						扩展功能
					</view>
				</view>
				<view class="nav-group group-block">
					<view class="nav-item" @click="toOtherAppMy('muu_minishop')" v-if="minishop">
						<text class="iconfont">&#xe69d;</text>
						<text class="nav-title">云小店</text>
					</view>
					<view class="nav-item" @click="toOtherAppMy('muu_scoreshop')" v-if="minishop">
						<text class="iconfont">&#xe641;</text>
						<text class="nav-title">积分商品</text>
					</view>
					<view class="nav-item" @click="toOtherAppMy('muu_activity')" v-if="activity">
						<text class="iconfont">&#xe6aa;</text>
						<text class="nav-title">我的活动</text>
					</view>
			    </view>
			</view>
			<!-- 扩展导航 -->
			
			<!-- 其它导航 -->
			<view class="modules">
				<view class="modules-header">
					<view class="title">
						其它功能
					</view>
				</view>
				<view class="nav-group group-block">
					<view class="nav-item" @click="navigateTo('feedback/index')">
						<text class="iconfont">&#xe620;</text>
						<text class="nav-title">建议/意见</text>
					</view>
					<view class="nav-item" @click="openContact()">
						<text class="iconfont">&#xec2e;</text>
						<text class="nav-title">联系客服</text>
					</view>
					<view class="nav-item" @click="navigateTo('config/index')">
						<text class="iconfont">&#xe640;</text>
						<text class="nav-title">设置</text>
					</view>
			    </view>
			</view>
			<!-- 其它导航 -->
			<template v-if="!loading && config.copyright !== undefined">
				<CopyRight />
			</template>
		</view>
		<!--自定义底部导航-->
		<tabBar :config="config" :footer="config.footer.data" />
		<!--登录框-->
		<Login ref="login" :config="config" @getUserInfo="getUserInfo"/>
		<!--联系客服popup弹窗-->
		<uni-popup ref="openContact" type="bottom">
			<view class="open-contact">
				<view class="header">联系客服</view>
				<view class="content">
					
					<view class="item contact" v-if="config.service.weixinkf">
						<!-- #ifdef H5 -->
						<view class="title">
							在线客服
						</view>
						<view class="info">
							<button size="mini" @click="openWeixinKf()">打开客服会话</button>
						</view>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="item contact">
							<view class="title">
								在线客服
							</view>
							<view class="info">
								<button open-type="contact" size="mini">打开客服会话</button>
							</view>
						</view>
						<!-- #endif -->
					</view>
					<template v-else>
						<!-- #ifdef MP-WEIXIN -->
						<view class="item contact">
							<view class="title">
								在线客服
							</view>
							<view class="info">
								<button open-type="contact" size="mini">打开客服会话</button>
							</view>
						</view>
						<!-- #endif -->
					</template>
					<!-- #ifdef H5 -->
					<view class="item qrcode">
						<view class="title">
							客服码
						</view>
						<view class="info">
							<image class="image" :src="config.service.qrcode_url"></image>
						</view>
					</view>
					<!-- #endif -->
					<view class="item qq" v-if="config.service.qq">
						<view class="title">
							QQ客服
						</view>
						<view class="info">
							<view class="">
								{{config.service.qq}}
							</view>
						</view>
					</view>
					<view class="item phone" v-if="config.service.mobile">
						<view class="title">
							服务热线
						</view>
						<view class="info">
							<view class="">
								{{config.service.mobile}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef MP
	// 小程序端执行
	import siteInfo from '../../../siteinfo.js'
	//#endif
	
	//#ifdef H5
	import siteInfo from '../../../siteinfoH5.js'
	//#endif
	import { mapState,mapMutations } from 'vuex'
	import CopyRight from '../common/copyRight.vue' //自定义版权
	import TabBar from "../common/tabBar.vue" //底部导航
	export default {
		components: {
			CopyRight,
			TabBar,
		},
		data() {
			return {
				loading: true,
				pluginList: [],
				studyCenterList: [], // 学习中心数据
				distributePluginConfig: {}, //分销插件配置
				clockinPluginConfig: {}, // 打卡插件配置
				userInfo: {},
				memberCard: false, // 付费会员卡是否启用
				appPlugin: false, // 应用扩展（非插件，如云小店）
				minishop: false,
				scoreshop: false,
				activity: false,
				forum: false, 
			}
		},
		
		async onLoad(option) {
			await this.$onLaunched;
			await this.getUserInfo()
			// H5端分享设置
			//#ifdef H5
			let url = window.location.href
			let shareData = {
				title : this.config.share.title + '|用户中心',
				desc : this.config.share.desc,
				img: this.config.share.icon
			}
			//console.log(url)
			this.wechat.share(shareData,url)
			//#endif
			await this.$nextTick(() => {
				this.loading = false
			})
		},
		
		created() {
			//设置原生导航栏
			this.setNavigation(this.config.style);
			this.getPlugin()
			this.getStudyCenterList()
			this.getDistributePluginConfig()
			this.getClockinPluginConfig()
			this.getMemberCardList()
		},
		onShow() {
			//this.getApiUserInfo()
		},
		onPullDownRefresh() {
			//console.log('refresh');
			this.getApiUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			/**
			 * 获取已安装插件列表
			 */
			getPlugin(){
				let that = this
				return new Promise((resolve, reject) => {
					let data = {}
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/plugin'
						//#endif
						//#ifdef H5
						url = 'entry/site/plugin'
						//#endif
					this.util.request({
						
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								let plugin = res.data.data
								plugin.forEach(function(v,l){
									that.pluginList.push(v.name)
								})
								//console.log('pluginList', that.pluginList)
								// 处理扩展应用
								let minishopIndex = that.pluginList.indexOf('muu_minishop')
								if(minishopIndex>-1){
									that.appPlugin = true
									that.minishop = true
								}
								let scoreshopIndex = that.pluginList.indexOf('muu_scoreshop')
								if(scoreshopIndex>-1){
									that.appPlugin = true
									that.scoreshop = true
								}
								let activityIndex = that.pluginList.indexOf('muu_activity')
								if(activityIndex>-1){
									that.appPlugin = true
									that.activity = true
								}
								let forumIndex = that.pluginList.indexOf('muu_forum')
								if(forumIndex>-1){
									that.appPlugin = true
									that.forum = true
								}
							}
							resolve(res.data)
						}
					})
				})
			},
			
			/**
			 * 学习中心列表
			 */
			getStudyCenterList() {
				let that = this
				this.page = 1
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.paid = 1
					data.type = this.type
					data.rows = 3
				//获取数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/study'
					//#endif
					//#ifdef H5
					url = 'entry/site/study'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.studyCenterList = []
							that.studyCenterList = res.data.data.data
						}
					}
				})
			},

			/**
			 * 获取分销插件配置
			 */
			getDistributePluginConfig: function(){
				let that = this
				//获取分销插件配置
				let data = {}
				
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/distribution'
					data.action = 'config'
					//#endif
					//#ifdef H5
					url = 'entry/site/config'
					data.action = 'config'
					data.m = 'muu_classroom_plugin_distribution'
					//#endif
				this.util.request({
					url : url,
					data: data,
					success: function (res) {
						if (res.data.code == 200) {
							that.distributePluginConfig = res.data.data
							//console.log(that.distributePluginConfig)
						}
					},
					fail: function(res){
						
					}
				})
			},
			
			/**
			 * 获取打卡插件配置
			 */
			getClockinPluginConfig: function(){
				let that = this
				//获取分销插件配置
				let data = {}
				
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/clockin'
					data.action = 'config'
					//#endif
					//#ifdef H5
					url = 'entry/site/clockin'
					data.action = 'config'
					data.m = 'muu_classroom_plugin_clockin'
					//#endif
				this.util.request({
					url : url,
					data: data,
					success: function (res) {
						if (res.data.code == 200) {
							that.clockinPluginConfig = res.data.data
						}
					},
					fail: function(res){
						
					}
				})
			},
			
			login: function(){
				//触发登录框
				this.$refs.login.login()
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo() {
				console.log('执行了')
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				console.log('userInfo',userInfo)
				if(Object.keys(userInfo).length > 0){
					this.userInfo = userInfo
				}else{
					this.util.getUserInfo((res)=>{
						this.userInfo = res
					})
				}
			},
			
			/**
			 * 获取用户详情数据
			 */
			getApiUserInfo() {
				let that = this
				let data = {}
					data.action = 'user_info'
					data.m = 'muu_classroom'
				//动态获取用户数据
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/ucenter'
					//#endif
					//#ifdef H5
					url = 'entry/site/ucenter'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.userInfo.sessionid = that.userInfo.sessionid
							that.userInfo.memberInfo = res.data.data
							uni.setStorageSync('userInfo', that.userInfo)
							//console.log(that.userInfo)
						}
						//结束下拉刷新
						uni.stopPullDownRefresh();
					}
				})
			},
			
			navigateTo: function(page){
				let that = this
				let url = page
				console.log(url)
				let userInfo = uni.getStorageSync('userInfo') || {};
				if (userInfo.memberInfo != undefined) {
					uni.navigateTo({
						url: url
					});
				}else{
					this.login()
				}
			},
			
			/**
			 * 联系客服popup弹出
			 */
			openContact: function(){
				this.$refs.openContact.open()
			},
			
			/**
			 * 查询是否有启用的会员卡
			 */
			getMemberCardList: function() {
				let that = this
				let data = {}
					data.action = 'lists'
				//获取数据
				//获取全局配置
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/member'
					//#endif
					//#ifdef H5
					url = 'entry/site/member'
					
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						//console.log(res.data.code);
						if (res.data.code == 200) {
							let list = res.data.data
							if(list.length > 0){
								that.memberCard = true
							}
						}
					}
				})
			},
			/**
			 * 扩展应用跳转
			 * @param {Object} app
			 */
			toOtherAppMy(app) {
				// #ifdef MP
				let url = '../../../'+app+'/pages/my/index'
				uni.navigateTo({
				    url: url
				});
				// #endif
				
				// #ifdef H5
				let base_url = window.location.protocol+"//"+window.location.host + '/addons/'+app+'/h5/?i=' + siteInfo.uniacid + '#/'
				let url = base_url + app + '/pages/my/index'
				window.location.href = url
				// #endif
			},
			
			/**
			 * 打开微信客服
			 */
			openWeixinKf() {
				location.href = this.config.service.weixinkf
			},
			
			/**
			 * 同步微信用户数据操作
			 */
			syncWeixin: function(e){
				let that = this
				// #ifdef H5
					var userInfo = {
						'sessionid': '',
						'memberInfo': '',
					};
					var url = this.util.url('entry/site/sync',{
						'm' : 'muu_classroom'
					});
					//获取当前页面完整url
					var return_url = window.location.href;
						return_url = encodeURIComponent(return_url);
						url = url + '&return_url=' + return_url
						console.log('oauth',url)
						//跳转网页授权登录
						window.location.href = url
				
				// #endif
				//#ifdef MP-WEIXIN
				if (uni.canIUse('getUserProfile')) {
					
					uni.getUserProfile({
						lang: 'zh_CN',
						desc: '用于登陆',
						success: function(wxInfo){
							console.log(wxInfo)
							that.util.updateUser(wxInfo, 'muu_classroom')
							that.$nextTick(() => {
								that.getApiUserInfo()
							})
						}
					})
				}
				//#endif
			},
			
			setNavigation: function(style) {
				let that = this
				//动态更改顶部状态栏演示
				let backgroundColor = '#ffffff'
				//console.log(this.config)
				if(style == 'Green'){
					backgroundColor = '#00ce74';
				}
				if(style == 'Blue'){
					backgroundColor = '#03b8cf';
				}
				if(style == 'LightRed'){
					backgroundColor = '#ea644a';
				}
				if(style == 'Orange'){
					backgroundColor = '#ff9900';
				}
				if(style == 'LightPink'){
					backgroundColor = '#ffb6c1';
				}
				if(style == 'Magenta'){
					backgroundColor = '#8666b8';
				}
				//console.log(backgroundColor);
				//更改小程序原生导航栏
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: backgroundColor,
				})
			}
		}
	}
</script>

<style lang="scss">

	page {
		background-color: #f8f8f8;
	}
	
	.main-section {
		height: 100%;
		overflow: auto;
		.header {
			position: relative;
			min-height: 180rpx;
			padding: 70rpx 40rpx 60rpx 40rpx;

			.user-info {
				color: #fff;
				display: flex;
				justify-content: left;
				.avatar {
					position: relative;
					width: 106rpx;
					height: 106rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
					border: 6rpx solid #fff;
					overflow: hidden;
					z-index: 3;
					.image {
						width: 106rpx;
						height: 106rpx;
						display: block;
						z-index: 1;
					}
				}
				.right-info {
					flex: 1;
					display: block;
					margin-left: 20rpx;
					
					.nickname {
						line-height: 42rpx;
						font-size: 30rpx;
						font-weight: 600;
					}
					.uid {
						line-height: 42rpx;
						font-size: 24rpx;
					}
					.info-2 {
						
						.btn {
							display: inline-block;
							font-size: 22rpx;
							border: 2rpx solid #fff;
							border-radius: 20rpx;
							padding: 6rpx 10rpx;
							.iconfont {
								font-size: 22rpx;
							}
							.text {
								padding-left: 7rpx;
							}
						}
					}
				}
				
			}
			.login {
				color: #fff;
				display: flex;
				justify-content: left;
				.avatar {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
					.image {
						width: 96rpx;
						height: 96rpx;
					}
				}
				.login-btn {
					display: block;
					line-height: 96rpx;
					font-size: 28rpx;
				}
			}
			
			.action-box {
				position: absolute;
				top: 20rpx;
				right: 30rpx;
				display: flex;
				.kefu {
					color: #fff;
					line-height: 42rpx;
					.iconfont {
						font-size: 42rpx;
					}
				}
				button.kefu {
					background-color: transparent;
					padding: 0;
					&::after {
						border: 0;
						background-color: transparent;
					}
				}
				.config {
					color: #fff;
					margin-left: 30rpx;
					line-height: 42rpx;
					.iconfont {
						font-size: 42rpx;
					}
				}
			}
		}
		.user-exp-info {
			position: relative;
			background-color: #fff;
			margin: -60rpx 20rpx 20rpx 20rpx;
			padding: 10rpx 0;
			z-index: 10;
			display: flex;
			color: #666;
			border-radius: 10rpx;
			box-shadow: 0 2rpx 4rpx rgba(0,0,0,.05);
			.line {
			    width: 2rpx;
			    margin: 40rpx 0;
			    background-color: #f2f2f2;
			}
			.wallet {
			    flex: 1;
			    padding: 20rpx 40rpx;
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					line-height: 44rpx;
				}
				.info {
					font-size: 24rpx;
					.credit {
						color: red;
						margin: 0 10rpx;
					}
				}
			}
			.checkin {
			    flex: 1;
			    padding: 20rpx 40rpx;
				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #000;
					line-height: 44rpx;
				}
				.info {
					font-size: 24rpx;
					.credit {
						color: red;
						margin: 0 10rpx;
					}
				}
			}
		}
		
		.modules {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 4rpx 4rpx rgba(0,0,0,.04);

			.modules-header{
				display: flex;
				padding: 26rpx 26rpx 0;
				line-height: 40rpx;
				.title{
					font-size: 30rpx;
					color: #222222;
					font-weight: 600;
				}
				.list-btn{
					margin-left: auto;
					color: #666666;
					font-size: 26rpx;
					.iconfont{
						font-size: 24rpx;
						padding-left: 15rpx;
					}
				}
			}
		}
		.group-block {
			display: flex;
			flex-wrap: wrap;
		}
		// 会员卡
		.vip{
			position: relative;
			margin: 20rpx;
			height: 100rpx;
			background: #232837;
			border-radius: 13rpx;
			display: flex;
			line-height: 100rpx;
			padding: 0 27rpx 0 20rpx;
			z-index: 10;
			box-shadow: 0 2rpx 4rpx rgba(0,0,0,.05);
			.vip-status{
				.iconfont{
				background-image:-webkit-linear-gradient(left,#f2dbc1,#F7c19e);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 30rpx;
				}
				.vip-desc{
					font-size: 30rpx;
					padding-left: 15rpx;
					background-image:-webkit-linear-gradient(left,#f2dbc1,#F7c19e);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			.vip-type{
				font-size: 24rpx;
				margin-left: auto;
				background-image:-webkit-linear-gradient(left,#f2dbc1,#F7c19e);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				.iconfont{
					font-size: 22rpx;
					padding-left:15rpx ;
					color: #f2dbc1;
				}
			}
		}
		// 学习中心
		.study-center{
			background:#fff;
			border-radius: 13rpx;
			margin: 20rpx;
			.modules-header{
				display: flex;
				padding: 26rpx 26rpx 0;
				line-height: 40rpx;
				.title{
					font-size: 30rpx;
					color: #222222;
					font-weight: 600;
				}
				.list-btn{
					margin-left: auto;
					color: #666666;
					font-size: 26rpx;
					.iconfont{
						font-size: 24rpx;
						padding-left: 15rpx;
					}
				}
			}

			.content{
				padding: 30rpx 27rpx 26rpx;
				.swiper{
					width: 100%;
					height: 90rpx;
					.swiper-item{
						display: flex;
						.curriculum{
							display: flex;
							line-height: 90rpx;
							height: 90rpx;
							.cover{
								width:118rpx;
								height:90rpx;
								border-radius: 10rpx;
							}
							.course-name{
								width:350rpx;
								margin-left: 22rpx;
								color: #222222;
								font-size: 26rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
								overflow: hidden;
							}
						}
						.operate-btn{
							margin-left: auto;
							font-size: 22rpx;
							line-height: 90rpx;
							.iconfont{
								padding-top: 0;
								font-size: 25rpx;
								padding-left: 10rpx;
							}
							.operate-btn-item{
								text-decoration:underline;
								text-underline-offset:6rpx;
							}
							
						}
					}
				}
				.none {
					color: #999;
					font-size: 28rpx;
				}
			}
		}
		
		//推广中心
		.tarec-modules{
			display: flex;
			padding: 30rpx 0 15rpx;
			border: 1px solid transparent;
			.tarec{
				padding: 20rpx 0 0 33rpx;
				.tarec-title{
					color:#222222;
					font-size: 30rpx;
					font-weight: 600;
				}
				.tarec-description{
					color: #999999;
					font-size: 24rpx;
					padding-top: 18rpx;
				}
			}
			.tarec-img{
				width: 238rpx;
				height: 141rpx;
				margin: 0 10rpx 0 auto;
				.tarec-img-item{
					width: 238rpx;
				    height: 141rpx;
				}
			}
		}
		//推广中心
		
		//功能
		.nav-group {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 27rpx;
			margin-bottom: 27rpx;
			.nav-item {
				// flex: 1;
				min-width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				padding-top: 30rpx;
				color: #333;
				.iconfont {
					font-size: 44rpx;
					color: #666;
				}
		
				.nav-title {
					font-size: 26rpx;
					color: #414141;
					font-weight: 400;
					line-height: 66rpx;
				}
		
				.nav-icon-num {
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
	}
	.open-contact {
		background-color: #fff;
		padding: 20rpx;
		.header {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 64rpx;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.content {
			.item {
				display: flex;
				margin-bottom: 16rpx;
				.title {
					width: 200rpx;
					font-size: 28rpx;
					color: #666;
				}
				.info {
					flex: 1;
					font-size: 28rpx;
					color: #666;
				}
			}
			.item.qrcode {
				.info {
					.image {
						width: 200rpx;
						height: 200rpx;
						border: 2rpx solid #f8f8f8;
					}
				}
			}
		}
	}
	
	.Blue {
		.main-section {
			.header {
				background-color: $Blue;
			}
			
			.study-center {
				.operate-btn {
					color: $Blue;
				}
			}
		}
	}
	
	.Green {
		.main-section {
			.header {
				background-color: $Green;
			}
			
			.study-center {
				.operate-btn {
					color: $Green;
				}
			}
		}
	}
	
	.LightRed {
		.main-section {
			.header {
				background-color: $LightRed;
			}
			.study-center {
				.operate-btn {
					color: $LightRed;
				}
			}
		}
	}
	
	.Orange {
		.main-section {
			.header {
				background-color: $Orange;
			}
			.study-center {
				.operate-btn {
					color: $Orange;
				}
			}
		}
	}
	
	.LightPink {
		.main-section {
			.header {
				background-color: $LightPink;
			}
			.study-center {
				.operate-btn {
					color: $LightPink;
				}
			}
		}
	}
	
	.Magenta {
		.main-section {
			.header {
				background-color: $Magenta;
			}
			.study-center {
				.operate-btn {
					color: $Magenta;
				}
			}
		}
	}

</style>
